<template>
  <div class="book-detail">
    <div class="book-detail-name"> 《{{ detail.name }}》 </div>
    <div class= "book-detail-msg"> 
      <div> 作者：{{ detail.author }} </div>
      <div> 章节数：{{ detail.totalChapter }} &nbsp;&nbsp; 字数：{{ detail.totalWords }} &nbsp;&nbsp; 状态：{{ statusDesc }} </div>
    </div> 
    <div class="book-detail-desc"> {{ detail.description }} </div>
  </div>
</template>

<script>

export default {
  name: 'BookDetail',
  props: {
    detail: {
      type: Object,
      default () {
        return {
          name: '',
          description: '',
          totalChapter: 0,
          totalWords: 0,
          author: '',
          status: ''
        }
      }
    }
  },
  computed: {
    statusDesc() {
      console.log("状态", this.detail.status)
      if( this.detail.status == 'updating' ) {
        return '持续更新中'
      } else if ( this.detail.status == 'end' ) {
        return '已完结'
      }
      return '未知状态'
    }
  },
  watch: {
  },
  methods: {

  }
}
</script>

<style>
.book-detail-name {
  padding: 0% 0% 1%;
  display: block;
  text-align: center;
  font-size: xx-large;
}
.book-detail-msg {
  text-align: center;
  padding: 1% 0%;
}
.book-detail-desc{
  padding: 1% 10%;
}
</style>